<template>
  <div>
    <login-top text="注册bilibili">
      <div slot="right" style="font-size:3.611vw" @click="$router.push('/login')">切换到用户登录</div>
    </login-top>
    <login-text
      label="姓名"
      style="margin:15.001px 0;"
      placeholder="请输入姓名"
      @contentWatch="res => model.name = res"
    ></login-text>
    <login-text label="账号" placeholder="请输入账号" @contentWatch="res => model.username = res"></login-text>
    <login-text
      label="密码"
      placeholder="请输入密码"
      type="password"
      @contentWatch="res => model.password = res"
    ></login-text>
    <login-btn btnText="注册" @TextClick="AjaxInsert"></login-btn>
  </div>
</template>

<script>
import loginTop from '@/components/common/loginTop.vue'
import loginText from '@/components/common/loginText.vue'
import loginBtn from '@/components/common/loginBtn.vue'
export default {
  data() {
    return {
      model: {}
    }
  },
  components: {
    loginTop,
    loginText,
    loginBtn
  },
  methods: {
    async AjaxInsert() {
      const regExp = /^.{6,16}/
      if (
        regExp.test(this.model.name) &&
        regExp.test(this.model.username) &&
        regExp.test(this.model.password)
      ) {
        const res = await this.$http.post('/register', this.model)
        this.$msg.fail(res.data.msg)
        localStorage.setItem('token', res.data.objtoken)
        localStorage.setItem('id', res.data.id)
        setTimeout(() => {
          this.$router.push('/userinfo')
        }, 2000)
      } else {
        this.$msg.fail('格式不正确，请重新输入！')
      }
    }
  }
}
</script>
<style>
</style>
